<template>
  <div class="UserConfig">
    <div class="top_serch">
      <el-form style="width: 60%;display: flex;flex-wrap: wrap;justify-content: space-around;align-items: center;"
        :model="form" label-width="110px">
        <el-form-item label="指挥部级别：" prop="accountName">
          <el-input clearable v-model="form.accountName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="启用状态：" prop="level">
          <el-select clearable v-model="form.level" placeholder="请选择">
            <el-option v-for="item in leveOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="serchBtn_box">
        <el-button type="primary" @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="list_box">
      <LsdTable slot="yjrwlb" :paginationAtrrs="table.paginationAtrrs" @pageChange="handleSizeChange"
        :compRef="table.compRef" ref="yjrwlb" :columns="table.columns" :title="table.title" :actions="table.actions"
        :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage"
        :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <LsdDialogTitle slot="dialog" :titleConfig="titleConfig" :activeNames="activeNames">
        <DialogForm slot="slot1" @handleNodeClick="handleNodeClick" ref="formTasking" :formConfig="formConfig"
          @select="BzSelect" />
      </LsdDialogTitle>
    </LsdDialog>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig1" @close="close(dialogConfig1)">
      <LsdTable slot="dialog" :autoHeight="table1.autoHeight" :multiple="table1.multiple"
        :paginationAtrrs="table1.paginationAtrrs" @pageChange="handleSizeChange" :compRef="table1.compRef" ref="role"
        :columns="table1.columns" :title="table1.title" :actions="table1.actions" :tableData="table1.tableData"
        :tableAttr="table1.tableAttr" :isShowPage="table1.isShowPage" :isSelectFlag="table1.isSelectFlag"
        :isSequenceFlag="table1.isSequenceFlag" @onActionClick="onActionClick" />
    </LsdDialog>
  </div>
</template>

<script>
import {
  accountList,
  accountAdd,
  deleteAccount,
  accountUpdate,
  ssdwList,
  ssbmList
} from "@/api/SystemConfig/userConfig";
import { tree } from "@/api/SystemConfig/organization";
import { roleList, accountConcatRloe } from "@/api/SystemConfig/roleConfig";
function checkHeight() {
  const height = `${window.innerHeight - (window.innerHeight * 0.458)}px`;
  return height;
}
export default {
  components: {},
  data() {
    return {
      form: {
        accountName: "",
        realName: "",
        jgjb: ""
      },
      leveOptions: [
        {
          value: "1",
          label: "启用"
        },
        {
          value: "2",
          label: "停用"
        }
      ],
      // 列表表格
      table: {
        isSelectFlag: false,
        compRef: "yjrwlb",
        isSequenceFlag: true,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        title: "应急指挥部级别列表",
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          },
          {
            id: "expor",
            text: "导出",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "accountName",
            label: "级别编号",
            align: "center"
          },
          {
            prop: "realName",
            label: "应急指挥部名称",
            align: "center"
          },
          {
            prop: "createTime",
            label: "更新时间",
            align: "center"
          },
          {
            prop: "roleName",
            label: "启用状态",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "120px",
            render: (h, scope) => {
              const arr = [{
                name: "编辑",
                color: "#3561fd"
              },
              {
                name: "删除",
                color: "#3561fd"
              },
              {
                name: "停用",
                color: "red"
              },
              {
                name: "启用",
                color: "green"
              }];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style={{ color: item.color, cursor: "pointer", margin: "0 10px" }} {...{
                          on: {
                            click: () => {
                              this.actionHandle(item.name, scope);
                            }
                          }
                        }}>
                          {item.name}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }

        ],
        tableAttr: {
          "min-height": checkHeight(),
          height: checkHeight(),
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      // 列表表格
      table1: {
        isSelectFlag: true,
        compRef: "yjrwlb",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: true,
        loading: false,
        autoHeight: true,
        multiple: false,
        title: "",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "roleName",
            label: "角色名称",
            align: "center"
          },
          {
            prop: "description",
            label: "角色说明",
            align: "center"
          }
        ],
        tableAttr: {
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      formConfig: {
        formData: [
          {
            label: "指挥部级别编号",
            type: "input",
            prop: "accountName",
            class: "sjgy",
            lableWidth: "170px"
          },
          {
            label: "指挥部级别名称",
            type: "input",
            prop: "realName",
            class: "sjgy",
            lableWidth: "170px"
          },
          {
            type: "select",
            label: "状态",
            prop: "appView",
            name: "appViewId",
            lableWidth: "170px",
            class: "sjgy",
            option: [
              {
                label: "启用",
                value: "1"
              },
              {
                label: "停用",
                value: "2"
              }
            ]
          }
        ],
        rules: {
          accountName: [
            { required: true, message: "请输入登录账号", trigger: "blur" }
          ],
          realName: [
            { required: true, message: "请输入用户姓名", trigger: "blur" }
          ],
          appView: [
            { required: true, message: "请选择APP视角", trigger: "blur" }
          ]
        }
      },
      // 折叠面板
      titleConfig: [
        {
          title: "基本信息",
          name: "1",
          slot: "slot1"
        }
      ],
      activeNames: ["1", "2", "3", "4", "5"],
      // 新增用户
      dialogConfig: {
        title: "应急指挥部级别新增",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "保存",
            type: "primary",
            id: "save",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      // 角色配置
      dialogConfig1: {
        title: "角色设置",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "保存",
            type: "primary",
            id: "save",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      accountId: ""
    };
  },
  computed: {},
  watch: {},
  mounted() {
    window.onresize = () => {
      checkHeight();
    };
    this.getlist();
  },
  methods: {
    BzSelect(val) {
      console.log(val);
    },
    // 获取所属单位下拉
    getDictionary() {
      this.formConfig.formData.forEach(item => {
        if (item.label === "所属单位") {
          ssdwList().then(res => {
            item.treeData.data = res;
          });
        }
      });
    },
    // 获取所属部门、班组下拉
    getSsbmList(id, type) {
      ssbmList({ orgId: id }).then(res => {
        console.log(res);
        if (type === "ssdw") {
          this.formConfig.formData[5].treeData.data = res;
        } else if (type === "ssbm") {
          this.formConfig.formData[6].treeData.data = res;
        }
      });
    },
    // 树结构点击事件
    handleNodeClick(item, nowId, index) {
      if (item.label === "所属机构") {
        this.getSsbmList(nowId, "ssdw");
      } else if (item.label === "所属部门") {
        this.getSsbmList(nowId, "ssbm");
      }
    },
    getlist(val) {
      let params = {};
      if (val) {
        params = { ...val };
      } else {
        params = {
          pageNum: 1,
          pageSize: 10
        };
      }
      accountList(params).then(res => {
        this.table.tableData = res.data;
        this.table.paginationAtrrs.total = res.total;
        this.table.paginationAtrrs.pageNum = params.pageNum;
        this.table.paginationAtrrs.pageSize = params.pageSize;
        console.log(this.table.paginationAtrrs, "???this.table.paginationAtrrs");
      });
    },
    query() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        ...this.form
      };
      this.getlist(params);
    },
    reset() {
      this.form = {};
      this.getlist();
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 机构配置新增
    add() {
      this.dialogConfig.isShow = true;
      this.dialogConfig.type = "add";
      // this.$nextTick(() => {
      //   // 新增时默认班组视角
      //   this.$refs.formTasking.form.appView = "2";
      // });
      this.getOrgTree();
      this.getDictionary();
    },
    // 组织机构树查询
    getOrgTree() {
      const parmas = {
        pid: "1533835007229984"
      };
      tree(parmas).then(res => {
        this.formConfig.formData[4].treeData.data = res;
      });
    },
    getRoleList(val) {
      let params = {};
      if (val) {
        params = { ...val };
      } else {
        params = {
          pageNum: 1,
          pageSize: 10
        };
      }
      roleList(params).then(res => {
        this.table1.tableData = res.data;
        this.table1.paginationAtrrs.total = res.total;
      });
    },
    // 分页
    handleSizeChange(val) {
      if (this.dialogConfig1.isShow) {
        const params = {
          pageNum: val["current-page"],
          pageSize: val["page-size"]
        };
        this.getRoleList(params);
      } else {
        const params = {
          pageNum: val["current-page"],
          pageSize: val["page-size"]
        };
        this.getlist(params);
      }
    },
    close(val) {
      val.isShow = false;
      this.$set(this.$refs.formTasking, "form", {});
    },
    // 保存
    save() {
      if (this.dialogConfig.isShow) {
        this.$refs.formTasking.isValidate();
        const flag = this.$refs.formTasking.flag || false;
        const params = {
          ...this.$refs.formTasking.form
        };
        if (flag) {
          if (this.dialogConfig.type === "edit") {
            accountUpdate(params).then(res => {
              if (res) {
                this.$message({
                  message: "编辑成功!",
                  type: "success"
                });
                this.dialogConfig.isShow = false;
                this.getlist();
              }
            });
          } else {
            accountAdd(params).then(res => {
              if (res) {
                this.$message({
                  message: "添加成功!",
                  type: "success"
                });
                this.dialogConfig.isShow = false;
                this.getlist();
              }
            });
          }
        }
      } else {
        const params = {
          roleId: this.$refs.role.selection[0].id,
          userId: this.accountId
        };
        accountConcatRloe(params).then(res => {
          if (res) {
            this.$message({
              message: "关联成功!",
              type: "success"
            });
            this.dialogConfig1.isShow = false;
            this.getlist();
          }
        });
      }
    },
    editAccount(scope) {
      this.dialogConfig.isShow = true;
      this.$nextTick(() => {
        this.$refs.formTasking.form = { ...scope.row };
      });
    },
    actionHandle(item, scope) {
      if (item === "编辑") {
        this.dialogConfig = {
          title: "用户编辑",
          isShow: false,
          type: "edit",
          btnList: [
            {
              name: "保存",
              type: "primary",
              id: "save",
              size: "mini"
            },
            {
              name: "取消",
              id: "cancel",
              size: "mini"
            }
          ],
          width: "40%"
        };
        this.getOrgTree();
        this.getDictionary();
        this.editAccount(scope);
      } else if (item === "角色设置") {
        console.log(item, "---item");
        this.dialogConfig1.isShow = true;
        this.getRoleList();
        this.accountId = scope.row.id;
      } else if (item === "删除") {
        this.$confirm("此操作将永久删除该账户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          deleteAccount({ id: scope.row.id }).then(res => {
            if (res) {
              this.$message({
                message: "删除成功!",
                type: "success"
              });
              this.getlist();
            }
          });
        })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });

      }
    },
    // 取消
    cancel() {
      this.dialogConfig.isShow = false;
    }

  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.UserConfig {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;

  .top_serch {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;

    :deep(.el-input__inner) {
      height: 32px;
      width: 320px !important;
      margin-bottom: 0;
    }

    :deep(.el-form-item__content) {
      width: 320px !important;
    }

    :deep(.el-form-item) {
      margin-bottom: 0;
    }

    .serchBtn_box {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }

  .list_box {
    width: 100%;
    flex: 1;
  }

  :deep(.el-dialog) {
    height: 42% !important;
  }
}

.jgpz_box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-input__inner) {
    height: 32px;
    margin-bottom: 0;
  }
}

:deep(.EmergencyList-dialog-form-item) {
  justify-content: center !important;
}

:deep(.el-form-item__content) {
  width: 525px !important;
}

:deep(.el-select--small) {
  width: 525px !important;
}

:deep(.treeList) {
  .treeSerch {
    .el-input__inner {
      width: 380px !important;
      height: 32px;
      margin-bottom: 0;
    }
  }
}
</style>
